<template>
<div>
<mt-header title="welcome">
  <router-link to="/" slot="left">
    <mt-button icon="back">返回</mt-button>
  </router-link>
  <mt-button icon="more" slot="right"></mt-button>
</mt-header>

<mt-tab-container v-model="activepage" >
  <mt-tab-container-item id="page1" class="container" >
  <app-logo/>
   <h1>indextpage</h1>
   <nuxt-link :to="{name:'module-page2'}" >to page2</nuxt-link>
   <nuxt/>
  </mt-tab-container-item>
  <mt-tab-container-item id="page2">
    <mt-cell v-for="n in 5" :key="n" title="tab-container 2"></mt-cell>
  </mt-tab-container-item>
  <mt-tab-container-item id="page3">
    <mt-cell v-for="n in 7" :key="n" title="tab-container 3"></mt-cell>
  </mt-tab-container-item>
</mt-tab-container>
   
<mt-tabbar v-model="activepage" >
  <mt-tab-item id="page1">
    page1
  </mt-tab-item>
  <mt-tab-item id="page2">
    page2
  </mt-tab-item>
  <mt-tab-item id="page3">
    page3
  </mt-tab-item>
</mt-tabbar>
</div>
</template>


<style>
body{
  margin: 0px;
}
.container{
  text-align: center;
}
</style>

<script>

import AppLogo from '~/components/AppLogo.vue'

export default {
  components: {
    AppLogo
  },
  data(){
    return  { 
      activepage: 'page1',
      }
  },
  methods:{
  }
}
</script>
